<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>训练记录</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <script src="../script/jquery.js"></script>
    <script src="../CommonTool/commonNetWork.js"></script>
  </head>
  <style>
    progress {
      margin-left: 5%;
      position: relative;
      height: 24px;
      width: 85%;
      border: 1px solid #fff;
    }
    /* progress::before {
    content: "Loading: " attr(value) "%";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
 } */
    progress::-webkit-progress-bar {
      background-color: orange;
    }
    progress::-webkit-progress-value {
      background-color: green;
    }
    .progress-textOne {
      position: absolute;
      left: 15%;
      top: 75%;
      transform: translate(-0%, -50%);
      color: #000;
      font-size: 14px;
    }
    .progress-textTwo {
      position: absolute;
      left: 50%;
      top: 75%;
      transform: translate(-0%, -50%);
      color: rgb(161, 159, 159);
      font-size: 14px;
    }
    .ThreeColumnsOne {
      width: 29%;
      float: left;
      text-align: left;
      font-size: 0.75rem;
    }
    .ThreeColumnsTwo {
      width: 23%;
      float: left;
      font-size: 0.75rem;
    }
    .ThreeColumnsThree {
      width: 20%;
      float: left;
      text-align: center;
      font-size: 0.75rem;
    }
    .ThreeColumnsFour {
      width: 28%;
      float: right;
      text-align: center;
      font-size: 0.75rem;
    }
    .RowColumns {
      height: 60px;
      line-height: 60px;
      padding-left: 3%;
      border-bottom: solid 1px rgb(212, 211, 211);
    }
    .RowColumnsIng {
      height: 60px;
      line-height: 60px;
      padding-left: 3%;
      background-color: rgb(220, 238, 215);
      border-bottom: solid 1px rgb(212, 211, 211);
    }
  </style>

  <body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
      <div class="aui-pull-left aui-btn" onclick="close_win();">
        <span class="aui-iconfont aui-icon-left"></span>返回
      </div>
      <div class="aui-title" style="left: 2rem; right: 2rem">
        <span id="MenuName"></span>
        训练记录
      </div>
      <div class="aui-pull-right">
        <i class="aui-iconfont aui-icon-my" onclick="UserCenter()"></i>
      </div>
    </header>
    <div class="aui-grid" style="background: none">
      <div class="aui-row">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
          <h2 style="margin: 0;">学习</h2>
          <a 
              class="aui-btn aui-btn-info aui-btn-sm" 
              style="padding: 0.3rem 0.8rem;" 
              href="TrainingRecord.html">
              泛化
          </a>
      </div>

        <div class="aui-col-xs-4">
          <h2>初级训练</h2>

          <div>
            <span id="BasicProgressOne">0</span>/<span id="BasicProgressTwo"
              >0</span
            >
          </div>
          <progress id="BasicProgress" value="30" max="100"></progress>
          <span id="l1percent" class="progress-textOne">正确题数</span>
          <!-- <span class="progress-textTwo">总题数</span> -->
        </div>
        <div class="aui-col-xs-4">
          <h2>中级训练</h2>
          <div>
            <span id="MiddleProgressOne">0</span>/<span id="MiddleProgressTwo"
              >0</span
            >
          </div>
          <progress id="MiddleProgress" value="30" max="100"></progress>
          <span id="l2percent" class="progress-textOne">正确题数</span>
          <!-- <span class="progress-textTwo">总题数</span> -->
        </div>
        <div class="aui-col-xs-4">
          <h2>高级训练</h2>
          <div>
            <span id="AdvancedProgressOne">0</span>/<span
              id="AdvancedProgressTwo"
              >0</span
            >
          </div>
          <progress id="AdvancedProgress" value="30" max="100"></progress>
          <span id="l3percent" class="progress-textOne">正确题数</span>
          <!-- <span class="progress-textTwo">总题数</span> -->
        </div>
      </div>
      <div class="aui-row" style="font-size: medium;">
        <div class="aui-col-xs-4" id="l1"></div>
        <div class="aui-col-xs-4" id="l2"></div>
        <div class="aui-col-xs-4" id="l3"></div>
      </div>
    </div>
  </body>
</html>
<script>
  var token = "";
  var userid = "";
  var groupId = "";
  var classType = "学习";
  var moodType = "";
  var sceneLevel = "";
  var scene = "";
  var courseType = "";
  var classSort = "";
  
  apiready = function () {
    token = api.pageParam.token;
    userid = api.pageParam.uid;
    var currentTimestamp = Date.now();

    summary()
    details()
  };
  //训练记录的总数

  function summary() {
    $.ajax({
      url: CommonUrl + "/PregressRecord/queryUserStCountDetail", // 新接口
      method: "get",
      dataType: "json",
      contentType: "application/json",
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        uid: userid,
        // courseType: courseType,
        sceneLevel: sceneLevel,
        // scene: scene,
        // classSort:classSort
      },
      success: function (data) {
        let response = JSON.parse(JSON.stringify(data));
        console.log(JSON.stringify(data));

        // basic
        let l1_nums = 0;
        let l1_class = 0;
        let l1_percent = 0;
        data.forEach((item) => {
          if (item.sceneLevel === "初级") {
            l1_nums += item.nums;
            l1_class += item.allClass;
            l1_percent = item.percent;
          }
        });

        // intermediate
        let l2_nums = 0;
        let l2_class = 0;
        let l2_percent = 0;

        data.forEach((item) => {
          if (item.sceneLevel === "中级") {
            l2_nums += item.nums;
            l2_class += item.allClass;
            l2_percent = item.percent;
          }
        });

        // advanced
        let l3_nums = 0;
        let l3_class = 0;
        let l3_percent = 0;

        data.forEach((item) => {
          if (item.sceneLevel === "高级") {
            l3_nums += item.nums;
            l3_class += item.allClass;
            l3_percent = item.percent;
          }
        });

        document.getElementById("BasicProgress").value = l1_nums;
        document.getElementById("BasicProgress").max = l1_class;
        document.getElementById("MiddleProgress").value = l2_nums;
        document.getElementById("MiddleProgress").max = l2_class;
        document.getElementById("AdvancedProgress").value = l3_nums;
        document.getElementById("AdvancedProgress").max = l3_class;

        document.getElementById("BasicProgressOne").textContent = l1_nums;
        document.getElementById("BasicProgressTwo").textContent = l1_class;
        document.getElementById("MiddleProgressOne").textContent = l2_nums;
        document.getElementById("MiddleProgressTwo").textContent = l2_class;
        document.getElementById("AdvancedProgressOne").textContent = l3_nums;
        document.getElementById("AdvancedProgressTwo").textContent = l3_class;

        document.getElementById("l1percent").textContent = l1_percent;
        document.getElementById("l2percent").textContent = l2_percent;
        document.getElementById("l3percent").textContent = l3_percent;
      },
      error: function (error) {
        alert(JSON.stringify(error));
      },
    });
  }

  function details() {
    $.ajax({
      url: CommonUrl + "/PregressRecord/queryUserStCountDetail",
      method: "get",
      dataType: "json",
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        uid: userid,
        sceneLevel: "初级",
        // scene: "基础",
        // courseType:"表情识别"
      },
      success: function (data) {

                console.log(JSON.stringify(data));

        // 构造每个等级的内容
        var l1Html = "";
        var l2Html = "";
        var l3Html = "";

        data.forEach(function (item, index) {
          var html = `
        <div>
          ${item.courseType || ""} | 通过率: ${item.percent || ""} | ${
            item.nums || 0
          }/${item.allClass || 0}
        </div>
        `;
          if (item.sceneLevel === "初级") {
            l1Html += html;
          } else if (item.sceneLevel === "中级") {
            l2Html += html;
          } else if (item.sceneLevel === "高级") {
            l3Html += html;
          }
        });

        console.log(l1Html, l2Html, l3Html);

        // 整体替换
        $("#l1").html(l1Html);
        $("#l2").html(l2Html);
        $("#l3").html(l3Html);
      },
      error: function (error) {
        alert(JSON.stringify(error));
      },
    });
  }
 
  // function recordList() {
  //     $.ajax({
  //         url: CommonUrl + "/PregressRecord/queryUserClassCountDetail?uid=" + userid,
  //         method: "get",
  //         dataType: "json",
  //         contentType: "application/json",
  //         headers: {
  //             Authorization: `Bearer ${token}`,
  //         },
  //         success: function (data) {
  //             var res = JSON.parse(JSON.stringify(data));
  //             // let stringifiedData = JSON.stringify(data);
  //             // alert(stringifiedData)
  //             // let parsedData = JSON.parse(stringifiedData);
  //             // alert(parsedData);
  //             var str = "";
  //             res.forEach(function (context, index) {
  //                 if (context.status === "end") {
  //                     str +=
  //                         "<li class='RowColumns'>" +
  //                         '<div class="ThreeColumnsOne">' +
  //                         Number(index + 1) +
  //                         "." +
  //                         context.scene +
  //                         context.sceneLevel +
  //                         "-" +
  //                         context.courseType +
  //                         "</div>" +
  //                         '<div class="ThreeColumnsTwo">' +
  //                         "已完成" +
  //                         ":" +
  //                         context.nums +
  //                         "/" +
  //                         context.allClass +
  //                         "</div>" +
  //                         '<div class="ThreeColumnsThree">' +
  //                         "通过率" +
  //                         ":" +
  //                         context.percent +
  //                         "</div>" +
  //                         '<div class="ThreeColumnsFour">' +
  //                         context.timestamp +
  //                         "</div>" +
  //                         "</li>";
  //                 } else if (context.status === "ing") {
  //                     if (context.courseType == "视线训练") {
  //                         str +=
  //                             "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
  //                             context.sceneLevel +
  //                             "', '" +
  //                             context.courseType +
  //                             "', '" +
  //                             context.nums +
  //                             "', '" +
  //                             context.groupId +
  //                             "')\">" +
  //                             '<div class="ThreeColumnsOne">' +
  //                             Number(index + 1) +
  //                             "." +
  //                             context.scene +
  //                             context.sceneLevel +
  //                             "-" +
  //                             context.courseType +
  //                             "</div>" +
  //                             '<div class="ThreeColumnsTwo">' +
  //                             "进行中" +
  //                             ":" +
  //                             context.nums +
  //                             "/" +
  //                             context.allClass +
  //                             "</div>" +
  //                             '<div class="ThreeColumnsFour">' +
  //                             context.timestamp +
  //                             "</div>" +
  //                             "</li>";
  //                     } else {
  //                         str +=
  //                             "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
  //                             context.sceneLevel +
  //                             "', '" +
  //                             context.courseType +
  //                             "', '" +
  //                             context.nums +
  //                             "', '" +
  //                             context.groupId +
  //                             "')\">" +
  //                             '<div class="ThreeColumnsOne">' +
  //                             Number(index + 1) +
  //                             "." +
  //                             context.scene +
  //                             context.sceneLevel +
  //                             "-" +
  //                             context.courseType +
  //                             "</div>" +
  //                             '<div class="ThreeColumnsTwo">' +
  //                             "进行中" +
  //                             ":" +
  //                             context.nums +
  //                             "/" +
  //                             context.allClass +
  //                             "</div>" +
  //                             '<div class="ThreeColumnsThree">' +
  //                             "通过率" +
  //                             ":" +
  //                             context.percent +
  //                             "</div>" +
  //                             '<div class="ThreeColumnsFour">' +
  //                             context.timestamp +
  //                             "</div>" +
  //                             "</li>";
  //                     }
  //                 }
  //             });
  //             $("#RecordHtml").html(str);
  //         },
  //         error: function (error) {
  //             alert(JSON.stringify(error));
  //         },
  //     });
  // }
  function close_win() {
    api.openWin({
      name: "MainMenu",
      url: "./MainMenu.html",
      pageParam: {
        uid: userid,
        token: token,
      },
    });
  }
  function JumpProgress(sceneLevel, courseType, nums, groupId) {
    $.ajax({
      url: CommonUrl + "/PregressRecord/queryHtmlType",
      method: "post",
      dataType: "json",
      data: JSON.stringify({
        sceneLevel: sceneLevel,
        courseType: courseType,
        sort: 1,
        groupId: "",
      }),
      contentType: "application/json",
      headers: {
        Authorization: `Bearer ${token}`,
      },
      success: function (data) {
        api.openWin({
          name: "ing",
          url:
            "./" +
            JSON.parse(JSON.stringify(data.data.sceneHtml)) +
            "/" +
            JSON.parse(JSON.stringify(data.data.courseHtml)) +
            "/" +
            JSON.parse(JSON.stringify(data.data.sortHtml)) +
            ".html",
          pageParam: {
            uid: userid,
            token: token,
            groupId: groupId,
          },
        });
      },
      error: function (error) {
        alert(JSON.parse(JSON.stringify(error.data)));
      },
    });
  }
</script>
<!-- 得分逻辑： 当进来时为ing   当做题为ing   当点击通过为ing  right   当离开时用end -->
